<template>
  <div>
    <h3>这是spu管理</h3>
    <CategorySelector></CategorySelector>

    <el-card style="margin-top:20px">
      <SkuForm v-if="showstatus == ShowStatus.ADD_SKU"   @ShowStatus="ShowStatusss" :spuInfo="spuList"></SkuForm>
      <SpuForm v-if="showstatus == ShowStatus.Add_SPU" @ShowStatus="ShowStatusss"   :spuListdata="spuList"></SpuForm>
      <SpuList v-if="showstatus == ShowStatus.SPU_LIST" @ShowStatus="ShowStatusss" @getSpuInfo="getSpu"></SpuList>
    </el-card>
  </div>
</template>

<script lang="ts">
export default {
  name: 'Spu'
}
</script>
<script lang="ts" setup>
import { ref } from "vue"
import { ShowStatus } from "./type"

import SkuForm from './SkuForm.vue';
import SpuList from './SpuList.vue';
import SpuForm from "./SpuForm.vue"
const spuList=ref({})
// .1
const showstatus = ref(ShowStatus.SPU_LIST)
//自定义方法切换组件
const ShowStatusss = (val:ShowStatus) => {
  showstatus.value = val;
  
}
const getSpu = (val) => {
  spuList.value = val;

  
}
</script>

<style >

</style>